import React,{useState} from 'react';
import {useNavigate} from 'react-router-dom'
import './login.css'
import axios from 'axios'
import { Button, Form, Input,message, Modal } from 'antd';
export default function Index() {
    const navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const [open, setOpen] = useState(false);
    const [user, setUser] = useState('');
    const [pwd, setPwd] = useState('');
    const changeUserInput=(e)=>{
        setUser(e.target.value)
    }
    const changePwdInput=(e)=>{
        setPwd(e.target.value)
    }
    const confirmModal=()=>{
        let obj={
            username:user,
            password:pwd
        }
        axios({
            method:"post",
            url:'http://localhost:5000/register',
            data:obj
        }).then(res=>{
            if(res.data.code===200){
                messageApi.open({
                    type: 'success',
                    content: '注册成功！',
                });
                setOpen(false);
                setUser("");
                setPwd("")
            }else{
                messageApi.open({
                    type: 'warning',
                    content:res.data.msg,
                });
                setOpen(false);
                setUser("");
                setPwd("")
            }
        })
    }
    const showModal = () => {
        setOpen(true);
    };
    const hideModal = () => {
        setOpen(false);
    };
    const onFinish = (values) => {
        let obj={
            username:values.username,
            password:values.password
        }
        axios({
            method:"post",
            url:'http://localhost:5000/login',
            data:obj
        }).then(res=>{
            if(res.data.code===200){
                messageApi.open({
                    type: 'success',
                    content: '登录成功！',
                });
                sessionStorage.setItem("token",res.data.token)
                sessionStorage.setItem("username",values.username)
                setTimeout(()=>{
                    navigate("/")
                },1000)
            }else{
                messageApi.open({
                    type: 'warning',
                    content: res.data.msg,
                });
            }
        })
    };
    return (
        <div className='loginbg'>
            {contextHolder}
            <div className='loginForm'>
                <h1>登录页面</h1>
                <div className='login'>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户名："
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}
                        >
                            <Input  style={{width:300}}/>
                        </Form.Item>

                        <Form.Item
                            label="密码："
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input.Password style={{width:300}}/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit" style={{ width:280,marginTop:20,marginRight:20 }}>
                                登录
                            </Button>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                              <Button type="text" onClick={showModal} style={{ width:280,marginRight:100 }}>没有账号?去注册</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
            <Modal
                title="注册"
                open={open}
                onOk={confirmModal}
                onCancel={hideModal}
                okText="确认"
                cancelText="取消"
            >
                  <Form
                    name="basic"
                    style={{
                        maxWidth: 600,
                        marginRight:140,
                        marginTop:30,
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="用户名："
                        name="username"
                    >
                        <Input value={user} onChange={changeUserInput} style={{width:300}}/>
                    </Form.Item>

                    <Form.Item
                        label="密码："
                        name="password"
                    >
                        <Input.Password value={pwd} onChange={changePwdInput} style={{width:300}}/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}